<template>
    <div>
        <div>
            <p style="display: flex">
                <el-button style="margin-bottom: 10px" size="mini" type="primary" @click="handleAdd">新增摄像头</el-button>
                <el-input v-model="queryParams.place" size="mini" style="width: 200px;margin-left: 20px" placeholder="输入所在地"></el-input>
                <el-button  style="margin-bottom: 10px;margin-left: 1px" size="mini" type="primary" @click="searchList" >搜索</el-button>
            </p>
        </div>
        <el-table
                border
                size="mini"
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    width="70px"
                    align="center"
                    label="序号"
                    prop="id">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="所在地"
                    prop="place">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="摄像头IP"
                    prop="ip">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="用户名"
                    prop="username">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="密码"
                    prop="password">
            </el-table-column>
            <el-table-column
                    width="100px"
                    align="center"
                    label="摄像头编号"
                    prop="serialNumber">
            </el-table-column>
            <el-table-column
                    width="100px"
                    align="center"
                    label="摄像头通道数"
                    prop="channel">
            </el-table-column>
            <el-table-column
                    width="100px"
                    align="center"
                    label="摄像头码流"
                    prop="stream">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="添加时间"
                    prop="createTime">
            </el-table-column>
            <el-table-column
                    align="center">
                <template #header>
                    操作
                </template>
                <template slot-scope="scope">
                    <p>
                        <el-button
                                size="mini"
                                type="primary"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                style="background: #FC011A;color: white"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </p>
                    <p>
                        <el-button  size="mini" type="primary" @click="pushStream(scope.$index, scope.row)">推送视频流</el-button>
                    </p>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination
                    background
                    layout="total, sizes,prev, pager, next,jumper"
                    :page-size="queryParams.size"
                    :page-sizes="[5,10,15]"
                    :current-page.sync="queryParams.current"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
        <el-dialog
                :title="isEdit?'编辑':'添加'"
                :visible.sync="dialogVisible"
                width="40%"
        >
            <el-form
                    ref="cameraForm"
                    :model="camera"
                    label-width="150px"
                    size="small"
            >
                <el-form-item label="摄像头所在地：">
                    <el-input v-model="camera.place" style="width: 250px"/>
                </el-form-item>
                <el-form-item label="摄像头ip：">
                    <el-input v-model="camera.ip" style="width: 250px"/>
                </el-form-item>
                <el-form-item label="摄像头通道数：">
                    <el-input v-model="camera.channel" style="width: 250px"/>
                </el-form-item>
                <el-form-item label="摄像头码流：">
                    <el-input v-model="camera.stream" style="width: 250px"/>
                </el-form-item>
                <el-form-item label="摄像头帐号：">
                    <el-input  v-model="camera.username" style="width: 250px"/>
                </el-form-item>
                <el-form-item label="摄像头密码：">
                    <el-input  v-model="camera.password" type="password" style="width: 250px"/>
                </el-form-item>
                <el-form-item label="摄像头编号：">
                    <el-input v-model="camera.serialNumber" style="width: 250px"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" size="small" @click="handleDialogConfirm()">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    import {addWebcam, deleteWebcam, getWebcamPage, updateWebcam} from "../../api/camera-managerment";
    import {openStream} from "../../api/video-stream";

    export default {
        data() {
            return {
                dialogVisible: false,
                isEdit: false,
                camera: {},
                queryParams: {
                    size: 5,
                    current: 1,
                    place: ''
                },
                tableData: [],
                search: '',
                total: null,
            }
        },
        created() {
            this.getWebcamList()
        },
        methods: {

            /**
             *
             * 推送视频流
             */
            pushStream(index,row){
                openStream(row).then(res =>{
                    this.$message({
                        message: res.message,
                        type: "success"
                    })
                })
            },
            /**
             * 搜索
             */
            searchList(){
                this.queryParams.current = 1
                this.getWebcamList()
            },
            /**
             * 获取摄像头列表
             */
            getWebcamList() {
                getWebcamPage(this.queryParams).then(res => {
                    console.log(res.data)
                    this.tableData = res.data.records
                    this.total = res.data.total
                })
            },
            handleDialogConfirm() {
                this.$confirm(`是否要${this.isEdit ? '更新' : '新增'}此摄像头？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: "warning"
                }).then(() => {
                    if (this.isEdit) {
                        updateWebcam(this.camera).then(res => {
                            this.$message({
                                message: res.message,
                                type: "success"
                            })
                            this.dialogVisible = false
                            this.getWebcamList()
                        })
                    } else {
                        addWebcam(this.camera).then(res => {
                            this.$message({
                                message: res.message,
                                type: "success"
                            })
                            this.dialogVisible = false
                            this.getWebcamList()
                        })
                    }
                })
            },
            resetData(){
                this.camera = {
                    ip: null, //摄像头ip
                    username: null, //摄像头用户名称
                    password: null, //摄像头密码
                    channel: "33", // 摄像头通道数
                    stream: "main", // 摄像头码流
                    place: null, //摄像头所在地点
                    serialNumber: null //摄像头序列号
                }
            },
            handleAdd(){
                this.resetData()
                this.isEdit = false
                this.dialogVisible = true
            },
            handleSizeChange(val) {
                this.queryParams.current = 1
                this.queryParams.size = val
                this.getWebcamList()
            },
            handleCurrentChange(val) {
                this.queryParams.current = val
                this.getWebcamList()
            },
            handleEdit(index, row) {
                this.camera = row
                this.isEdit = true
                this.dialogVisible = true
                console.log(index, row);
            },
            handleDelete(index, row) {
                this.$confirm('确定要删除此摄像机吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: "warning"
                }).then(() => {
                    deleteWebcam(row.id).then(() => {
                        this.$message({
                            message: '删除成功！',
                            type: "success"
                        })
                        this.getWebcamList()
                    })
                })
            }
        },
    }
</script>

<style scoped lang="less">
    //分页栏样式
    .pagination-container {
        display: inline-block;
        float: right;
        margin-top: 20px;
    }
</style>
